<template>
	<view class="page">
		<view class="li-box" v-for="(item, index) in addressList" :key="index">
			<view class="flex-between flex-align-center name">
				<view>
					{{ item.userName }}
					<text>{{ item.phone }}</text>
				</view>
				<view @click="jumpEditAddressPage('edit')" :style="{ color: themeColor }" class="iconfont icon-bianji"></view>
			</view>
			<view class="address">{{ item.province + item.city + item.country + item.street + item.detail }}</view>
			<view class="hr"></view>
			<view class="flex-between flex-align-center delSet">
				<view @click="selectActive(index)" class="tit">
					<text v-if="index === atvIndex" class="iconfont icon-danxuan" :style="{ color: themeColor }"></text>
					<text v-else class="iconfont icon-danxuan1"></text>
					<text>默认地址</text>
				</view>
				<view @click="delel(index)" class="delel" :style="{ color: themeColor }">删除</view>
			</view>
		</view>

		<view v-if="addressList.length < 1" class="noData"><list-empty :iconUrl="require('@/pages/sp-address/images/no-address.png')" title="未添加任何地址" /></view>

		<button @click="jumpEditAddressPage('add')" class="addbtn" hover-class="btnActive" :style="{ backgroundColor: themeColor }">新增地址</button>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { getAddressList, setDefaultAddress, addressDelete } from '@/service/api/sp-address/index';
import ListEmpty from '@/components/baseComponents/list-enpty/index.vue';
export default {
	components: {
		ListEmpty
	},
	computed: {
		...mapState('sp-common/base', ['themeColor'])
	},
	data() {
		return {
			atvIndex: 0,
			addressList: ''
		};
	},
	onShow() {
		this.addressListFun();
	},
	methods: {
		// 跳转编辑地址
		jumpEditAddressPage(val) {
			this.$Router.push({
				name: 'myEditAddress',
				params: {
					type: val,
					data: val === 'edit' ? this.addressList[this.atvIndex] : ''
				}
			});
		},
		// 获取地址列表
		addressListFun() {
			getAddressList().then(res => {
				this.addressList = res;
			});
		},
		// 选择默认地址
		selectActive(index) {
			this.atvIndex = index;
			let addressId = this.addressList[index].id;
			setDefaultAddress({ addressId }).then(res => {
				uni.showToast({
					title: '设置成功',
					icon: 'none',
					duration: 2000
				});
			});
		},
		//删除地址
		delel(index) {
			let that = this;
			wx.showModal({
				title: '提示',
				content: '删除该地址？',
				success(res) {
					if (res.confirm) {
						let addressId = that.addressList[index].id;
						addressDelete({ addressId }).then(res => {
							uni.showToast({
								title: '删除成功',
								icon: 'none',
								duration: 2000
							});
							that.addressListFun();
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.page {
	padding: 20rpx;
	box-sizing: border-box;
}
.flex-between {
	display: flex;
	justify-content: space-between;
}
.flex-align-center {
	align-items: center;
}
.li-box {
	width: 100%;
	overflow: hidden;
	background-color: white;
	border-radius: 10rpx;
	margin-bottom: 19rpx;
	.name {
		font-size: 32rpx;
		color: #181818;
		font-weight: bold;
		margin: 0 30rpx;
		margin-top: 34rpx;
		text {
			color: #888888;
			font-weight: normal;
			margin-left: 25rpx;
		}
		.iconfont {
			font-size: 28rpx;
		}
	}
	.address {
		width: 70%;
		color: #181818;
		font-size: 27rpx;
		margin: 0 30rpx;
		margin-top: 34rpx;
	}
	.delSet {
		margin: 31rpx 30rpx;
		.tit {
			font-size: 27rpx;
			font-weight: 500;
			color: #181818;
			display: flex;
			align-items: center;
			.iconfont {
				display: block;
				margin-right: 11rpx;
				float: left;
			}
		}
		.delel {
			font-size: 27rpx;
			font-weight: 500;
			color: #ffb72f;
		}
	}
	.hr {
		width: 100%;
		border-top: 1px solid #ececec;
		margin: 36rpx 0 31rpx;
	}
}
.noData {
	position: fixed;
	top: 30%;
	left: 0;
	width: 100%;
	text-align: center;
	color: #ccc;
}
.addbtn {
	width: 600rpx;
	height: 80rpx;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
	line-height: 80rpx;
	position: fixed;
	bottom: 50px;
	left: 50%;
	margin-left: -300rpx;
}
.btnActive {
	opacity: 0.5;
}
</style>
